<template>
  <div class="article">
    <div class="wrapper">
      <div class="top">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="小吃名称" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入小吃名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="所属城市" prop="city">
            <el-input
              v-model="queryParams.city"
              placeholder="请输入所属城市"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="art">
        <el-row :gutter="20">
          <div
            class="left"
            v-for="item in findFoods"
            :key="item.id"
            @click="goDetail(item.id)"
          >
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <div class="pic"><img width="100%" :src="item.pic" /></div>
                <div class="text">
                  <div class="name">小吃名：{{ item.name }}</div>
                  <div class="name">城市：{{ item.city }}</div>
                </div>
                <div class="top"></div></div
            ></el-col>
          </div>
        </el-row>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="[8, 12, 16]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next"
            :total="page.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { findFood } from "@/utils/request";
export default {
  name: "Food",
  data() {
    return {
        findFoods: [],
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 8,
        name: null,
        city: null,
      },
      // 表单参数
      form: {},
      // 分页
      page: {
        size: 8,
        currentPage: 1,
        total: 0,
      },
    };
  },
  methods: {
    findPageQueryFood() {
      findFood(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.findFoods = res.rows;
          this.page.total = res.total;
        } else {
          this.$message({
            type: "error",
            message: this.message,
          });
        }
      });
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.queryParams.pageNum = val;
      this.findPageQueryFood();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.queryParams.pageNum = val;
      this.findPageQueryFood();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.findPageQueryFood();
    },
      goDetail(id){
          // 跳转到详情页面，并且传递id
          this.$router.push({path:'/foodDetail',query:{id:id}})
      },
  },
  created() {
      this.findPageQueryFood();
  },
};
</script>

<style scoped lang='scss'>
.top {
  height: 40px;
  margin: 10px 0 10px 0;
}
.name {
  text-align: center;
}
.page {
  margin-left: 480px;
}
</style>
